

<template>
  <view class="warehouse">
    <view class="warehouse-drop-list">
      <u-row :gutter="24" style="width: 100%">
        <u-col :span="6">
          <div class="home-drop-item " @click="openCategory(1)">
            <span class="drop-name">{{ dropItem.label || '全部' }}</span>
            <u-icon name="arrow-down-fill" color="#2498F6" size="24"></u-icon>
          </div>
        </u-col>
<!--        <u-col :span="4">-->
<!--          <div class="home-drop-item " @click="openCategory(2)" style="margin: 0 20rpx">-->
<!--            <span class="drop-name">{{ dropItem2.label || '类型' }}</span>-->
<!--            <u-icon name="arrow-down-fill" color="#2498F6" size="24"></u-icon>-->
<!--          </div>-->
<!--        </u-col>-->
        <u-col :span="6">
          <div class="home-drop-item " @click="openCategory(3)">
            <span class="drop-name">{{ storeCount ? '库存:' + storeCount + '吨' : '库存：0吨' }}</span>
          </div>
        </u-col>
      </u-row>

    </view>
    <DayTab ref="dayTabRef" :active-day="activeDay" :currentDate="dropItem.value" @change="changeDay"></DayTab>
    <view class="warehouse-box">
      <u-tabs :list="list" :current="current" @change="changeTab" />
      <view class="warehouse-list">
        <view class="warehouse-item" v-for="item in storeList">
          <view class="warehouse-name">
            {{ item.matModel && item.matModel.matname }}
          </view>
          <view class="warehouse-info">
            <view class="warehouse-info-item-label">{{ item.count }}吨</view>
            <view class="warehouse-info-item-value">{{ item.create_time }}</view>
          </view>
        </view>
      </view>
      <u-empty v-if="storeList.length === 0" text="暂无数据" mode="list"></u-empty>

    </view>
    <u-select
        :default-value="defaultCategoryIndex"
        v-model="showCategory"
        :list="categoryList"
        @cancel="showCategory = false"
        @confirm="confirmCategory">
    </u-select>

    <!--    阶段-->
    <u-select
        v-model="showStock"
        :list="stockList"
        @cancel="showStock = false"
        @confirm="confirmStock">
    </u-select>
    <u-picker
        v-model="showDate"
        mode="time"
        :start-year="2020"
        :end-year="ownYear"
        :params="{
          year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
        }"
        @cancel="showDate = false"
        @confirm="confirmDate">
    </u-picker>

  </view>
</template>
<script>
import dayjs from 'dayjs'
import { mapState } from 'vuex'
import DayTab from "../../components/dayTab.vue";
export default {
  name: "warehouse",
  components: {
    DayTab
  },
  data() {
    return {
      scrollLeft: 100,
      // 库存
      storeCount: 0,
      ownYear: new Date().getFullYear(),
      showDate: false,
      showCategory: false,
      showStock: false,
      defaultCategoryIndex: [0],
      categoryList: [

      ],
      stockList: [

      ],
      dropItem: {
        value: dayjs().format('YYYY-MM'),
        label: dayjs().format('YYYY年MM月')
      },
      dropItem2: {
      },
      dropItem3: {
      },
      activeDay: {
        week: '',
        day: dayjs().date()
      },
      list: [
        {
          name: '出库'
        },
        {
          name: '入库'
        },
      ],
      current: 0,
      storeList: [
      ]
    };
  },
  methods: {
    // 根据时间获取数据
    requestData() {
      // current = 0 出库 current = 1 入库
      this.$api.getStoreList({
        date: this.activeDay.day ? `${this.dropItem.value}-${this.activeDay.day > 9 ? this.activeDay.day || '0' + this.activeDay.day : this.activeDay.day}` : this.dropItem.value,
        type: this.current
      }).then(res => {
        this.storeList = res.map(item => {
          return {
            ...item,
            count: this.current === 0 ? item.outnum : item.matnum,
            create_time: this.current === 0 ? item.outtime : item.buytime,
          }
        })
      })
    },
    openCategory(type) {
      if(type === 1) {
        this.showDate = true
      }
      if(type === 2) {
        this.showCategory = true
      }
      if(type === 3) {
        this.showStock = true
      }
    },
    confirmDate(value) {
      this.showDate = false
      this.$refs.dayTabRef.setDayList()
      const date = `${value.year}-${value.month}`
      if (date === dayjs().format('YYYY-MM')) {
        this.activeDay = {
          week: '',
          day: dayjs().date()
        }
      } else {
        this.activeDay = {
          week: '',
          day: 1
        }
        this.dropItem = {
          value: date,
          label: dayjs(date).format('YYYY年MM月')
        }
      }
      this.requestData()
    },
    confirmCategory(value) {
      this.showCategory = false
      console.log(value)
    },
    confirmStock(value) {
      this.showStock = false
      console.log(value)
    },
    changeDay(item) {
      if (item.day === this.activeDay.day) {
        this.activeDay = {
        }
      } else {
        this.activeDay = {
          ...item
        }
      }
      this.requestData()
      console.log('changeDay')
    },
    changeTab(index) {
      this.current = index
      this.requestData()
    },
  },
  computed: {
    ...mapState(['farm']),
  },
  watch: {
    farm: {
      handler() {
        this.requestData()
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
<style lang="scss">
.warehouse {
  height: 100%;
  padding: 0 30rpx;
  .warehouse-box {
    background: #FFFFFF;
    box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(36,152,246,0.37);
    border-radius: 30rpx 30rpx 30rpx 30rpx;
    padding: 20rpx;
    margin-top: 30rpx;
    .warehouse-list {
      padding-top: 30rpx;
      .warehouse-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24rpx 0;
        border-top: 1rpx solid #E5E5E5;
        .warehouse-name {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 25rpx;
          color: #333333;
          line-height: 34rpx;
        }
        .warehouse-info {
          .warehouse-info-item-label {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 25rpx;
            color: #333333;
            line-height: 25rpx;
            margin-bottom: 16rpx;
          }
          .warehouse-info-item-value {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 25rpx;
            color: #333333;
            line-height: 25rpx;
          }
        }
      }
    }
  }
  .warehouse-drop-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40rpx 0;
  }
  .home-drop-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(36,152,246,0.36);
    border-radius: 33rpx 33rpx 33rpx 33rpx;
    padding: 18rpx 30rpx;
    .drop-name {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 30rpx;
      line-height: 30rpx;
      color: #000000;
      margin-right: 20rpx;
    }
  }
}
</style>
